<template>
	<view>
		<!-- 头部 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#fff" size="50"></u-icon>
			<text>使用指南</text>
		</view>
		<view class="search">
			<u-search placeholder=" " v-model="keyword" :show-action="false" bg-color="rgb(68,92,225)" border-color="#fff" color="#fff"></u-search>
		</view>
		<view class="section">
		<view class="zn-main">
			<view class="imgInfor">
				<view @click="details">
					<image src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/operation.png" mode=""></image>
					<view class="">使用方法</view>
				</view>
				<view @click="details">
					<image src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/manual.png" mode=""></image>
					<view class="">应用操作手册</view>
				</view>
				<view @click="details">
					<image src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/edition.png" mode=""></image>
					<view class="">版本更新</view>
				</view>
				
			</view>
			<view class="imgInfor">
				<view @click="details">
					<image src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/maintain.png" mode=""></image>
					<view class="">维修养护</view>
				</view>
				<view @click="details">
					<image src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/more.png" mode=""></image>
					<view class="">维修养护</view>
				</view>
				<view>
					
				</view>
				
			</view>
		</view>
		
		<view class="summarizing">
			<view style="font-size: 36rpx;font-weight: bold;">常见问题</view>

				<view class="summari" @click="useList">
					<text style="font-size: 32rpx;font-weight: bold;">衣服如何充电？</text>
					<u-icon name="arrow-right" size="30" color="#777" style="float: right;"></u-icon>
				</view>
				
				<view class="summari" @click="useList">
					<text style="font-size: 32rpx;font-weight: bold;">怎么开机？</text>
					<u-icon name="arrow-right" size="30" color="#777" style="float: right;"></u-icon>
				</view>
				
				<view class="summari" @click="useList">
					<text style="font-size: 32rpx;font-weight: bold;">怎么绑定手机？</text>
					<u-icon name="arrow-right" size="30" color="#777" style="float: right;"></u-icon>
				</view>
				
				<view class="summari" @click="useList">
					<text style="font-size: 32rpx;font-weight: bold;">如何连网？</text>
					<u-icon name="arrow-right" size="30" color="#777" style="float: right;"></u-icon>
				</view>

		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '输入你想搜索的内容'
			}
		},
		methods: {
			navigateBack() {
				uni.switchTab({
					url: '../my'
				})
			},
			details(){
				uni.reLaunch({
					url:'useList/useList'
				})
			},
			useList(){
				uni.reLaunch({
					url:'details/details'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	// 头部
	.navbar {
		padding-top: 90rpx;
		padding-bottom: 40rpx;
		width: 750rpx;
		color: #fff;
		background-color: rgb(68, 92, 223);
	}
	.navbar>text {
		font-size: 36rpx;
		padding-left: 220rpx;
	}
	// 搜索
	.search{
		background-color: rgb(68,92,223);
		padding-bottom: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	// 内容
	.zn-main{
		margin: 30rpx;border-radius: 10rpx;padding: 30rpx 30rpx;
		box-shadow: 1px 1px 2px rgb(228, 227, 227), 0 0 8px rgb(228, 227, 227), 0 0 1px rgb(228, 227, 227);
	}
	.imgInfor{
		margin-top: 30rpx;
		display: flex;
	}
	.imgInfor > view{
		flex: 1;
		text-align: center;
		font-weight: bold;
	}
	image{
		
		width: 100rpx;
		height: 100rpx;
	}
	.summarizing{
		padding: 50rpx 50rpx;
	}
	.summari{
		margin-top: 30rpx;
		padding: 20rpx;
		border-bottom: 1px solid rgb(233,233,233);
	}
</style>
